@php
    $user_id = Auth::user()->id;
@endphp
@extends('layouts.default')

@section('title', '教学反思')

@push('scripts')
<script src="{{ asset('lib/xm-select-v1.2.4/xm-select.js')}}"></script>
<script>
    layui.use(['layer','form','table','laytpl','laydate','element','laypage','upload'], function(){
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var element = layui.element;
        var laypage = layui.laypage;
        var upload = layui.upload;
        var xmDemo;
        var zmrDemo;
        var fzrDemo;
        var jxsjFiles = [];
        var zysjFiles = [];
        var xxgfFiles = [];
        var gbfdFiles = [];
        var anliFiles = [];

        var jxsjFilesNumber = 4;
        var zysjFilesNumber = 4;
        var xxgfFilesNumber = 1;
        var gbfdFilesNumber = 1;

        renderSelect();


        //下拉框初始化
        async function renderSelect(){
            //await renderDictionarySelect();
            await renderDicSelect();
            await renderTermSelect();
            //await renderParticipants();
        }

        //字典下拉框数据渲染
        function renderDictionarySelect() {
            return new Promise((resolve) => {

            });
        }

        //学期下拉框数据渲染
        function renderTermSelect() {
            return new Promise((resolve) => {
                getTermData({},function(res){
                    if(res.code == 1){
                        $('[data-role=termList]').empty().append('<option value="">请选择</option>');
                        for(var i in res.data){
                            $('[data-role=termList]').append('<option value="'+res.data[i].id+'">'+res.data[i].title+'</option>');
                        }

                        form.render('select');

                        resolve();
                    }
                });
            });
        }

        //参与教师下拉框数据渲染
        function renderParticipants() {
            return new Promise((resolve) => {
                getParticipantsData({},function(res){
                    if(res.code == 1){
                        xmDemo = xmSelect.render({
                            el: '#pter',
                            autoRow: true,
                            filterable: true,
                            tree: {
                                show: true,
                                showFolderIcon: true,
                                showLine: true,
                                indent: 20,
                                expandedKeys:false
                            },
                            direction: 'down',
                            filterable: true,
                            height: 'auto',
                            name:'participant',
                            // layVerify: 'required',
                            // layVerType: 'msg',
                            // layReqText:'参与教师不能为空',
                            theme: {
                                color: '#2d8cf0',
                            },
                            disabled:true,
                            searchTips:'关键字搜索',
                            data: function(){
                                return res.data
                            }
                        })

                        return resolve();
                    }
                });
            });
        }

        window.fileDelete = function (fk, ft) {
            if(ft == 1) {
                delete jxsjFiles[fk];
                let files = jxsjFiles;

                $('#jxsj-file').val(JSON.stringify(jxsjFiles));
                $('#jxsj-uploader').parent().find('.file-show').html('');
                for(i in files) {
                    if(files[i]) {
                        let fsHtml = '<div class="file-item"><span class="file-name">'+files[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 1)"></span></div>';
                        $('#jxsj-uploader').parent().find('.file-show').append(fsHtml);
                    }
                }
            } else if(ft == 2) {
                delete zysjFiles[fk];
                let files = zysjFiles;

                $('#zysj-file').val(JSON.stringify(zysjFiles));
                $('#zysj-uploader').parent().find('.file-show').html('');
                for(i in zysjFiles) {
                    if(files[i]) {
                        let fsHtml = '<div class="file-item"><span class="file-name">'+files[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 2)"></span></div>';
                        $('#ja-uploader').parent().find('.file-show').append(fsHtml);
                    }
                }
            } else if(ft == 3) {
                delete xxgfFiles[fk];
                let files = xxgfFiles;

                $('#xxgf-file').val(JSON.stringify(xxgfFiles));
                $('#xxgf-uploader').parent().find('.file-show').html('');
                for(i in xxgfFiles) {
                    if(!files[i]) return;

                    let fsHtml = '<div class="file-item"><span class="file-name">'+files[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 3)"></span></div>';
                    $('#xxgf-uploader').parent().find('.file-show').append(fsHtml);
                }
            }else if(ft == 4) {
                delete gbfdFiles[fk];
                let files = gbfdFiles;

                $('#gbfd-file').val(JSON.stringify(gbfdFiles));
                $('#gbfd-uploader').parent().find('.file-show').html('');
                for(i in gbfdFiles) {
                    if(!files[i]) return;

                    let fsHtml = '<div class="file-item"><span class="file-name">'+files[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 4)"></span></div>';
                    $('#gbfd-uploader').parent().find('.file-show').append(fsHtml);
                }
            }else if(ft == 5) {
                delete anliFiles[fk];
                let files = anliFiles;

                $('#anli-file').val(JSON.stringify(anliFiles));
                $('#anli-uploader').parent().find('.file-show').html('');
                for(i in anliFiles) {
                    if(!files[i]) return;

                    let fsHtml = '<div class="file-item"><span class="file-name">'+files[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 4)"></span></div>';
                    $('#anli-uploader').parent().find('.file-show').append(fsHtml);
                }
            }
        }

        //文件上传
        upload.render({
            elem: '#jxsj-uploader'
            ,url: "{{route('uploads.upload')}}" //此处配置你自己的上传接口即可
            ,accept: 'file' //普通文件
            ,multiple: true
            ,number: 1
            ,size: 102400
            ,before: function () {
                if($('input[name="is_young_teachers"]:checked').val() == 1){
                    if ($("#jxsj_file .file-item").length >= jxsjFilesNumber) {
                        showloading(false);
                        layer.msg("附件最多上传4个", {icon: 5});
                        return false
                    }
                }else if($('input[name="is_young_teachers"]:checked').val() == ''){
                    showloading(false);
                    layer.msg("必须勾选是否为青年教师", {icon: 5});
                    return false
                }
            }
            ,choose: function(obj){
                //上传loading
                //showloading(true);
                obj.preview(function(index, file, result){
                    if(file.size > 102400) {
                        showloading(false, 1);
                    }
                });
            }
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                if(obj.total == obj.successful) {
                    //layer.msg('上传成功');
                } else {
                    layer.msg(obj.failed + '个文件上传失败！');
                }
            }
            ,done: function(res){
                showloading(false);
                if(res.code != 1) {
                    layer.msg(res.msg);
                    return false;
                }
                jxsjFiles.push(res.data);
                $('#jxsj-file').val(JSON.stringify(jxsjFiles));

                $('#jxsj-uploader').parent().find('.file-show').html('');
                for(i in jxsjFiles) {
                    if(jxsjFiles[i]) {
                        let fsHtml = '<div class="file-item"><span class="file-name">'+jxsjFiles[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 1)"></span></div>';
                        $('#jxsj-uploader').parent().find('.file-show').append(fsHtml);
                    }
                }
                layer.msg('上传成功');
            }
            ,error: function(index, upload){ //错误回调
                console.log(index);
            }
        });
        upload.render({
            elem: '#zysj-uploader'
            ,url: "{{route('uploads.upload')}}" //此处配置你自己的上传接口即可
            ,accept: 'file' //普通文件
            ,multiple: true
            ,size: 102400
            ,choose: function(obj){
                //上传loading
                //showloading(true);
                obj.preview(function(index, file, result){
                    if(file.size > 102400) {
                        showloading(false, 1);
                    }
                });
            }
            ,before: function () {
                if($('input[name="is_young_teachers"]:checked').val() == 1){
                    if ($("#zysj_file .file-item").length >= zysjFilesNumber) {
                        showloading(false);
                        layer.msg("附件最多上传"+zysjFilesNumber+"个", {icon: 5});
                        return false
                    }
                }else if($('input[name="is_young_teachers"]:checked').val() == ''){
                    showloading(false);
                    layer.msg("必须勾选是否为青年教师", {icon: 5});
                    return false
                }
            }
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                showloading(false);
                if(obj.total == obj.successful) {
                    //layer.msg('上传成功');
                } else {
                    layer.msg(obj.failed + '个文件上传失败！');
                }
            }
            ,done: function(res){
                showloading(false);
                if(res.code != 1) {
                    layer.msg(res.msg);
                    return false;
                }
                zysjFiles.push(res.data);
                $('#zysj-file').val(JSON.stringify(zysjFiles));

                $('#zysj-uploader').parent().find('.file-show').html('');
                for(i in zysjFiles) {
                    if(zysjFiles[i]) {
                        let fsHtml = '<div class="file-item"><span class="file-name">'+zysjFiles[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 2)"></span></div>';
                        $('#zysj-uploader').parent().find('.file-show').append(fsHtml);
                    }
                }
                layer.msg('上传成功');
            }
            ,error: function(index, upload){ //错误回调
                showloading(false);
                console.log(index);
            }
        });
        upload.render({
            elem: '#xxgf-uploader'
            ,url: "{{route('uploads.upload')}}" //此处配置你自己的上传接口即可
            ,accept: 'file' //普通文件
            ,multiple: true
            ,size: 102400
            ,choose: function(obj){
                //上传loading
                //showloading(true);
                obj.preview(function(index, file, result){
                    if(file.size > 102400) {
                        showloading(false, 1);
                    }
                });
            }
            ,before: function () {
                is_young_teachers = $('input[name="is_young_teachers"]:checked').val();
                if(is_young_teachers == 1){
                    if ($("#xxgf_file .file-item").length >= xxgfFilesNumber) {
                        showloading(false);
                        layer.msg("附件最多上传"+xxgfFilesNumber+"个", {icon: 5});
                        return false
                    }
                }else if(is_young_teachers == 2){
                    showloading(false);
                }else{
                    showloading(false);
                    layer.msg("是否为青年教师不能为空", {icon: 5});
                    return false
                }
            }
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                showloading(false);
                if(obj.total == obj.successful) {
                    //layer.msg('上传成功');
                } else {
                    layer.msg(obj.failed + '个文件上传失败！');
                }
            }
            ,done: function(res){
                showloading(false);
                if(res.code != 1) {
                    layer.msg(res.msg);
                    return false;
                }
                xxgfFiles.push(res.data);
                $('#xxgf-file').val(JSON.stringify(xxgfFiles));

                $('#xxgf-uploader').parent().find('.file-show').html('');
                for(i in xxgfFiles) {
                    if(xxgfFiles[i]) {
                        let fsHtml = '<div class="file-item"><span class="file-name">'+xxgfFiles[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 3)"></span></div>';
                        $('#xxgf-uploader').parent().find('.file-show').append(fsHtml);
                    }
                }
                layer.msg('上传成功');
            }
            ,error: function(index, upload){ //错误回调
                console.log(index, 1);
            }
        });

        upload.render({
            elem: '#gbfd-uploader'
            ,url: "{{route('uploads.upload')}}" //此处配置你自己的上传接口即可
            ,accept: 'file' //普通文件
            ,multiple: true
            ,size: 102400
            ,choose: function(obj){
                //上传loading
                //showloading(true);
                obj.preview(function(index, file, result){
                    if(file.size > 102400) {
                        showloading(false, 1);
                    }
                });
            }
            ,before: function () {
                if($('input[name="is_young_teachers"]:checked').val() == 1){
                    if ($("#gbfd_file .file-item").length >= gbfdFilesNumber) {
                        showloading(false);
                        layer.msg("附件最多上传"+gbfdFilesNumber+"个", {icon: 5});
                        return false
                    }else if($('input[name="is_young_teachers"]:checked').val() == ''){
                        showloading(false);
                        layer.msg("必须勾选是否为青年教师", {icon: 5});
                        return false
                    }
                }
            }
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                showloading(false);
                if(obj.total == obj.successful) {
                    //layer.msg('上传成功');
                } else {
                    layer.msg(obj.failed + '个文件上传失败！');
                }
            }
            ,done: function(res){
                showloading(false);
                if(res.code != 1) {
                    layer.msg(res.msg);
                    return false;
                }
                gbfdFiles.push(res.data);
                $('#gbfd-file').val(JSON.stringify(gbfdFiles));

                $('#gbfd-uploader').parent().find('.file-show').html('');
                for(i in gbfdFiles) {
                    if(gbfdFiles[i]) {
                        let fsHtml = '<div class="file-item"><span class="file-name">'+gbfdFiles[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 4)"></span></div>';
                        $('#gbfd-uploader').parent().find('.file-show').append(fsHtml);
                    }
                }
                layer.msg('上传成功');
            }
            ,error: function(index, upload){ //错误回调
                showloading(false);
                console.log(index, 1);
            }
        });

        upload.render({
            elem: '#anli-uploader'
            ,url: "{{route('uploads.upload')}}" //此处配置你自己的上传接口即可
            ,accept: 'file' //普通文件
            ,multiple: true
            ,size: 102400
            ,choose: function(obj){
                //上传loading
                //showloading(true);
                obj.preview(function(index, file, result){
                    if(file.size > 102400) {
                        showloading(false, 1);
                    }
                });
            }
            ,before: function () {

            }
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                showloading(false);
                if(obj.total == obj.successful) {

                } else {
                    layer.msg(obj.failed + '个文件上传失败！');
                }
            }
            ,done: function(res){
                showloading(false);
                if(res.code != 1) {
                    layer.msg(res.msg);
                    return false;
                }
                anliFiles.push(res.data);
                $('#anli-file').val(JSON.stringify(anliFiles));

                $('#anli-uploader').parent().find('.file-show').html('');
                for(i in anliFiles) {
                    if(anliFiles[i]) {
                        let fsHtml = '<div class="file-item"><span class="file-name">'+anliFiles[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 5)"></span></div>';
                        $('#anli-uploader').parent().find('.file-show').append(fsHtml);
                    }
                }
                layer.msg('上传成功');
            }
            ,error: function(index, upload){ //错误回调
                showloading(false);
                console.log(index, 1);
            }
        });
        form.on('radio(is_young_teachers)', function(data){
            if(data.value == 1) {
                $(".red-show").show();
            } else {
                $(".red-show").hide();
            }
        });

        //提交
        form.on('submit(sub)', function(data){
            let d = data.field;
            d.status = 1;
            d.do_task = 1;
            if(d.is_young_teachers == 1) {
                if($("#jxsj_file .file-item").length != 4 ){
                    layer.msg('教学设计必须传4篇！', {icon: 5, time: 1000});
                    return false;
                }

                if ($("#zysj_file .file-item").length != 4) {
                    layer.msg('作业设计与实施必须传4篇！', {icon: 5, time: 1000});
                    return false;
                }

                if ($("#xxgf_file .file-item").length != 1) {
                    layer.msg('请上传学习规范1篇！', {icon: 5, time: 1000});
                    return false;
                }
                if ($("#gbfd_file .file-item").length != 1) {
                    layer.msg('请上传别辅导1篇！', {icon: 5, time: 1000});
                    return false;
                }
            }else if(d.is_young_teachers == 2){
                /**
                count = 0;
                if($("#jxsj_file .file-item").length >= 1){
                    count++;
                }
                if($("#zysj_file .file-item").length >= 1){
                    count++;
                }
                if($("#xxgf_file .file-item").length >= 1){
                    count++;
                }
                if($("#gbfd_file .file-item").length >= 1){
                    count++;
                }
                if(count != 2){
                    layer.msg('只能上传2个分类！', {icon: 5, time: 1000});
                    return false;
                }**/
            }else{
                layer.msg('必须勾选是否为青年教师！', {icon: 5, time: 1000});
                return false;
            }
            addActivity(d, function(res){
                if(res.code == '1'){
                    layer.msg(res.msg,{icon: 6,time: 1000},function(){
                        window.history.back();
                    });
                }else{
                    layer.msg(res.msg, {icon: 5,shift : 6});
                }
            });

            return false;
        });

        //保存
        $('#save-btn').click(function(){
            var isValid = form.validate('.data-version-id');
            if(!isValid) return false;

            var data = form.val("addForm");

            data.status = 2;

            addActivity(data,function(res){
                if(res.code == '1'){
                    layer.msg(res.msg,{icon: 6,time: 1000},function(){
                        window.history.back();
                    });
                }else{
                    layer.msg(res.msg, {icon: 5,shift : 6});
                }
            });
            return false;
        });


        laydate.render({
            elem: '#begin-date'
            ,type: 'date'
        });
        laydate.render({
            elem: '#end-date'
            ,type: 'date'
        });

        //字典下拉框数据渲染
        function renderDicSelect() {
            return new Promise((resolve) => {
                getDicListByCodes({'diccode': ['JYZ']}, function (res){
                    if(res.code === 1) {
                        let data = res.data;

                        for(var k in data) {
                            let key = k.toLowerCase();
                            $('[data-role='+key+'List]').empty().append('<option value="">请选择</option>');
                            let d = data[k];
                            for (var i in d) {
                                $('[data-role='+key+'List]').append('<option value="' + d[i].itemcode + '">' + d[i].itemname + '</option>');
                            }
                        }

                        form.render();

                        resolve();
                    }
                });
            });
        }
    });
</script>
@endpush

@section('content')
<style>
    .opt-panel{padding: 10px;}
    .panel-title h3{margin-bottom: 20px;font-weight: 800;}

    .opt-form{padding: 20px 5px;}
    .opt-area{display: flex;flex-direction: row-reverse;padding: 10px 20px;margin-bottom: 20px;}
    .opt-area button, .back-btn{margin-left: 10px;}
    .layuik-upload{position: relative;}
    .redtip{position: absolute;top: 38px;}
    .layuik-inline .layuik-form-label{
        width:170px !important;
    }
</style>

<div class="layui-row">
    <div class="layui-panel opt-panel">
        <form class="layui-form opt-form" action="" id="add-form" lay-filter="addForm">
            <div class="layui-row">
                <div class="panel-title">
                    <h3>教学反思（案例） - 新增</h3>
                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>学年学期：</label>
                        <div class="layuik-input-inline">
                            <select class="data-version-id" name="data_version_id" lay-filter="termList" data-role="termList" lay-verify="required" lay-reqText="不能为空"></select>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>案例名称：</label>
                        <div class="layuik-input-inline">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入" lay-reqText="不能为空" autocomplete="off" class="layui-input">
                        </div>

                    </div>
                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>是否为青年教师：</label>
                        <div class="layuik-input-inline">
                            <input type="radio" name="is_young_teachers" value="1" title="是" lay-verify="otherReq" class="layui-radio" lay-filter="is_young_teachers">
                            <input type="radio" name="is_young_teachers" value="2" title="否" lay-verify="otherReq" class="layui-radio" lay-filter="is_young_teachers">
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>教研组：</label>
                        <div class="layuik-input-inline">
                            <select name="jyz_code" lay-filter="jyzList" data-role="jyzList" lay-verify="required"></select>
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar red-show">*</i>教学设计：</label>
                        <div class="layuik-input-inline layuik-upload zmd-upload-area">
                            <button type="button" class="layui-btn layui-btn-normal" id="jxsj-uploader"><i class="layui-icon"></i>上传文件</button>
                            <span class="file-show" id="jxsj_file"></span>
                            <p class="redtip red-show">需上传 4 份相关附件</p>
                            <input style="display:none" type="text" id="jxsj-file" name="files[jxsj]" value="">
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar red-show">*</i>作业设计与实施：</label>
                        <div class="layuik-input-inline layuik-upload">
                            <button type="button" class="layui-btn layui-btn-normal" id="zysj-uploader"><i class="layui-icon"></i>上传文件</button>
                            <div class="file-show" id="zysj_file"></div>
                            <input style="display:none" type="text" id="zysj-file" name="files[zysj]" value="">
                            <p class="redtip red-show">需上传 4 份相关附件</p>
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar red-show">*</i>学习规范：</label>
                        <div class="layuik-input-inline layuik-upload">
                            <button type="button" class="layui-btn layui-btn-normal" id="xxgf-uploader"><i class="layui-icon"></i>上传文件</button>
                            <div class="file-show" id="xxgf_file"></div>
                            <input style="display:none" type="text" id="xxgf-file" name="files[xxgf]" value="">
                            <p class="redtip red-show">需上传 1 份相关附件</p>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar red-show">*</i>个别辅导：</label>
                        <div class="layuik-input-inline layuik-upload">
                            <button type="button" class="layui-btn layui-btn-normal" id="gbfd-uploader"><i class="layui-icon"></i>上传文件</button>
                            <div class="file-show" id="gbfd_file"></div>
                            <input style="display:none" type="text" id="gbfd-file" name="files[gbfd]" value="">
                            <p class="redtip red-show">需上传 1 份相关附件</p>
                        </div>
                    </div>

                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">案例、反思、经验分享：</label>
                        <div class="layuik-input-inline layuik-upload">
                            <button type="button" class="layui-btn layui-btn-normal" id="anli-uploader"><i class="layui-icon"></i>上传文件</button>
                            <div class="file-show" id="anli_file"></div>
                            <input style="display:none" type="text" id="anli-file" name="files[anli]" value="">
                            <p class="redtip red-show">可上传多份相关附件</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row">
                <div class="opt-area">
                    <a href="javascript:history.go(-1);" class="layui-btn layui-btn-primary back-btn">返回</a>
                    <button class="layui-btn layui-btn-primary" type="button" id="save-btn" style="color:#2d8cf0;">保存</button>
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="sub">提交</button>
                    <input type="hidden" name="activity_category" value="TEACHING_REFLECT_TABLE">
                </div>
            </div>
        </form>
    </div>
</div>

@endsection
